<template>
	<view>
		<view class="tab">
			<view class="tab-item" @click="tabAction(0)">
				<text :class="{active: tabIndex === 0}">已完成</text>
			</view>
			<view class="tab-item" @click="tabAction(1)">
				<text :class="{active: tabIndex === 1}">随机推荐</text>
			</view>
		</view>
		<view class="list">
			<mytest-item v-for="item in list[tabIndex]" :key="item.topic_id" :item="item" :tab="tabIndex" />
			
		</view>
		<view class="over-tips" v-if="list[tabIndex].length > 0 && loadOver[tabIndex]">没有更多数据</view>
		<view class="data-none" v-if="list[tabIndex].length === 0 && loadOver[tabIndex]">
			<image src="../../static/data-none.jpeg" mode="widthFix" />
			<text>当前无测评</text>
			<navigator url="/pages/search/index">查看更多测试</navigator>
		</view>
	</view>
</template>

<script>
	import config from '../../src/config/api.config.js';
	import request from '../../src/utils/request.js';
	import userCheck from '../../src/utils/user.js';
	import myTestItem from './mytest-item.vue';
	export default {
		data() {
			return {
				parentOpenid: '',
				openid: '',
				localtionPlatform: '',
				bodyShow: true, // 显示页面
				tabIndex: 0, // 切换索引
				page: [1, 1], // 页码
				loadOver: [false, false], // 是否加载完全部
				isLoading: [true, false], // 是否加载中
				list: [[], []], // 列表数据
			}
		},
		onLoad(options) {
			const that = this;
			this.parentOpenid = options.parentOpenid != undefined ?options.parentOpenid:'';
			this.localtionPlatform = userCheck.PlatformType;
			userCheck.checkSession(function(openid){
				that.openid = openid;
				that.getData(0);
			},this.parentOpenid);
		},
		methods: {
			/**
			 * 获取列表数据
			 * @param {Object} index 当前加载的数据是属于第几个tab
			 */
			async getData(index) {
				const r = await request({
					url: [`${config.API}api/topic/getPlayLog`, `${config.API}api/topic/randomTopic`][index],
					data: {
						openid: this.openid,
						page: this.page[index]
					}
				});
				this.isLoading[index] = false;
				if (r.error_code === 0) {
					const temp = this.list;
					if (index === 1) {
						temp[index] = [...temp[index], ...r.data.topicList];
					} else {
						temp[index] = [...temp[index], ...r.data.data];
					}
					
					this.$set(this.list, index, temp[index]);
					// 如果是随机推荐，只加载一次
					if (index === 1) {
						this.loadOver[1] = true;
					} else if (r.data.current_page >= r.data.last_page) {
						this.loadOver[index] = true;
					}
				}
			},
			/**
			 * tab切换
			 * @param {Object} index 索引
			 */
			tabAction(index) {
				this.tabIndex = index;
				if (this.loadOver[index] || this.isLoading[index]) return;
				this.getData(index);
			}
		},
		onReachBottom(r) {
			if(this.loadOver[this.tabIndex] || this.isLoading[this.tabIndex]) return;
			this.page[this.tabIndex] ++;
			this.getData(this.tabIndex);
		},
		components: {
			'mytest-item': myTestItem
		}
	}
</script>

<style>
	page {
		background-color: #f1f1f1;
	}
</style>

<style lang="scss" scoped>
.tab {
	background-color: #fff;
	margin-bottom: 30rpx;
	display: flex;
	align-items: center;
	.tab-item {
		flex: 1;
		font-size: 32rpx;
		text-align: center;
		padding: 20rpx 0;
		text {
			position: relative;
			color: #666;
			&.active {
				color: #5f89ff;
				font-weight: bold;
				&:after {
					content: '';
					width: 50rpx;
					height: 6px;
					background-color: #5f89ff;
					position: absolute;
					left: 50%;
					bottom: -20rpx;
					margin-left: -25rpx;
				}
			}
		}
	}
}
.over-tips {
	padding: 20rpx 0;
	text-align: center;
	color: #999;
	font-size: 24rpx;
}
.data-none {
	display: flex;
	flex-direction: column;
	align-items: center;
	image {
		display: block;
		width: 400rpx;
		height: 400rpx;
		margin: 10% auto 0 auto;
	}
	text {
		font-size: 32rpx;
		color: #999;
		margin-top: 30rpx;
	}
	navigator {
		background-color: #5f89ff;
		color: #fff;
		border-radius: 8rpx;
		text-align: center;
		padding: 20rpx 0;
		width: 60%;
		display: block;
		margin: 30rpx auto 0 auto;
	}
}
</style>
